<template>
    <div>
        <ul class="wdddul">
           <li :class="{active:activeli==1}" @click="activeli=1">全部订单</li>
           <li :class="{active:activeli==2}" @click="activeli=2">代付款</li>
           <li :class="{active:activeli==3}" @click="activeli=3">待发货</li>
           <li :class="{active:activeli==4}" @click="activeli=4">待收货</li>
        </ul>
        <div v-if="activeli==1" class="carcontainer">
            <app-car time="2018-1-1" ddh="565656665654" :url="require('../../assets/car.png')" cartitle="寂寞双人床" carstyle="绿色"  carprice="1999" carnum="1" isgo="已发货"></app-car>
            <app-car time="2018-1-1"></app-car>
            <app-car time="2018-1-1"></app-car>
        </div>
        <div v-if="activeli==2" class="carcontainer">
            <app-car time="2018-1-1" ddh="565656665654" :url="require('../../assets/car.png')" cartitle="寂寞双人床" carstyle="绿色"  carprice="1999" carnum="1" isgo="已发货"></app-car>
        </div>
        <div v-if="activeli==3" class="carcontainer">
            <app-car time="2018-1-1"></app-car>
        </div>
        <div v-if="activeli==4" class="carcontainer">
           
        </div>
    </div>
</template>
<script>
import Car from './wdddcar'
export default {
    components:{
        'app-car':Car
    },
    data(){
        return {
            activeli:"1"
        }
    }
}
</script>
<style lang="css">
    .wdddul{
        padding:0px;
        padding-top:14px;
        
    }
    .wdddul:after{
        content:"";
        display:block;
        clear:both;
        width:0;
        height:0px;
    }
    .wdddul li{
        list-style:none;
        float:left;
        width:150px;
        text-align: center;
        line-height:40px;
        border-bottom:1px #ccc solid;
    }
    .wdddul li.active{
        border-bottom:1px #b49d7e solid;
    }
    .carcontainer{
        height:450px;
        overflow:auto;
    }
</style>